Raycast自作の拡張機能でAWSサービス名のtypoをサクッと確認・修正できるようにしてみた

Raycast自作の拡張機能でAWSサービス名のtypoをサクッと確認・修正できるようにしてみた

以前AWSサービス名のtypo予防用のtexlintのルールを作成しました。すごく便利なのですが、「ちょっと今書いている文章をチェックしたい」とか「VSCodeやターミナルを立ち上げることすら手間に感じる・・・」と思ってきました。そこで、キーボードひとつでサクッと実行できる環境を作るため、Raycastの拡張機能自作に挑戦してみました。
Clock Icon2023.04.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。AWS事業本部コンサルティング部に所属している今泉(@bun76235104)です。

私は以前textlintというしくみを使ってAWSのサービス名の誤り・typoに気づける、typoを修正できるルールを作成していました。

以下のような形でVSCodeなどのエディタと組み合わせることでブログ執筆中のtypoを減らすことができます。

vscode_image

しかし、利用するにつれて以下のようなことを思うようになりました。

  • ガッツリ記事を書くときはVSCodeひらいて良いけど、今書いている文章をさっとチェックしたい
  • もうキーボードショートカットだけでチェックしたい

ということで、最近RaycastというMac向けのランチャーツールにハマっているので、サクッとtypoを修正できるように自作の拡張機能を作ってみました!

先に結論(こんな感じでサクッとチェック・修正できます)

20230428_textlint_raycast_summary

  • input欄にチェック・修正したい項目を入力
  • cmd+enterでformをサブミット
  • 下に修正後のテキストと、修正内容が表示される

作り方

以下のブログと同じ手順でテンプレートから自作の拡張機能を作成し始めます。

Create Your First Extension - Raycast APIにあるようにRaycastでCreate Extensionコマンドを実行することでテンプレートから拡張機能のテンプレートが作られます。

私の場合テンプレートとしてFormを選択しました。

20230428_textlint_raycast_create1

この時点で以下のようにファイル群が作成されます。

.
├── CHANGELOG.md
├── README.md
├── assets
│   └── command-icon.png
├── package-lock.json
├── package.json
├── src
│   └── index.tsx
└── tsconfig.json

今回はシンプルな作りですので、src/index.tsxを直接変更して、他にファイルなどは作成しません。

まずpackage.jsonに利用するtextlintのルールなどについて依存性を追記して、npm installを済ませておきます。

  "devDependencies": {
    "@raycast/eslint-config": "1.0.5",
    // 追加
    "@textlint/kernel": "^13.3.2",
    // 追加
    "@textlint/textlint-plugin-markdown": "^13.3.2",
    "@types/node": "18.8.3",
    "@types/react": "18.0.9",
    "eslint": "^7.32.0",
    "prettier": "^2.5.1",
    // 追加
    "textlint": "^13.3.2",
    // 追加
    "textlint-rule-aws-service-name": "^1.3.2",
    "typescript": "^4.4.3"
  },

後はindex.tsxを以下のように記載するだけです。

import { useState } from "react";
import { Form, ActionPanel, Action, showToast, Toast } from "@raycast/api";
import { TextlintKernel, TextlintKernelOptions } from "@textlint/kernel";
import * as pluginMarkdown from "@textlint/textlint-plugin-markdown";
import * as awsRule from "textlint-rule-aws-service-name";

type Values = {
  input: string;
};

export default function Command() {
  const [lintResult, setLintResult] = useState<string>("");
  const [fixed, setFixed] = useState<string>("");

  async function runTextLint(values: Values) {
    const kernel = new TextlintKernel();
    const options = getOptions();
    // textlintの実行
    const result = await kernel.lintText(values.input, options);
    const messages = result.messages.map((message) => {
      return `${message.message}`;
    });
    if (messages.length === 0) {
      showToast(Toast.Style.Success, "Check Result", "Input text is valid");
    }
    const lintResult = messages.join("\n");
    // チェックの結果を表示
    setLintResult(lintResult);
    const fixedResult = await kernel.fixText(values.input, options);
    const fixed = fixedResult.output;
    // 修正後の文章を表示
    setFixed(fixed);
  }

  return (
    <Form
      actions={
        <ActionPanel>
          <Action.SubmitForm onSubmit={runTextLint} />
        </ActionPanel>
      }
    >
      // 入力用のテキストエリア
      <Form.TextArea id="input" title="Input" placeholder="Please enter the text you wish to check" />
      <Form.Separator />
      // 結果出力用のテキストエリア
      <Form.TextArea id="fixed" title="Fixed Result" value={fixed} />
      <Form.TextArea id="lintResult" title="Check Result" value={lintResult} />
    </Form>
  );
}

function getOptions(): TextlintKernelOptions {
  const options: TextlintKernelOptions = {
    ext: ".md",
    plugins: [
      {
        pluginId: "markdown",
        plugin: pluginMarkdown.default,
      },
    ],
    rules: [
      {
        ruleId: "aws-service-name",
        rule: awsRule.default,
      },
    ],
  };
  return options;
}

npm run devを実行することにより以下のようなフォームが表示されますので、Inputのテキストエリアにチェックしたい文章を入力します。

20230428_textlint_raycast_input_form

後はcmd+enterを押すことにより結果が出力されます。

20230428_textlint_raycast_result

これでFixed Resultの欄に表示されている結果をコピペするだけで、AWSサービス名のtypoを予防できます。(2023年4月28日現在、すべてのサービスに対応している訳ではありません)

さいごに

今回自分向けにRaycastの拡張機能を作成してみました!

とても簡単に作成できたので、創作意欲が湧いてきますね!

今回はあくまで「自作の拡張機能」としてパブリックに公開できていません!

Raycast Storeにてみなさんがワンクリックで利用できるようにするには、raycast/extensionsでPull Requestを作成してマージされる必要があります。

現在Pull Requestまで作成していますが、もし公開まで至ったら(至らないでも)、公開までの方法を別途記事にしたいと思います。

以上福岡オフィス所属の今泉でした。

最後まで読んでいただきありがとうございます。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.